<template>
  <van-row class="mobile-raw">
    <van-row class="top">
      <van-col span="7">注单号</van-col>
      <van-col span="5">类型</van-col>
      <van-col span="4">玩法</van-col>
      <van-col span="3">下注</van-col>
      <van-col span="5">可赢</van-col>
    </van-row>

    <van-row v-if="listData && listData.list && listData.list.length > 0">

      <van-row class="list">

        <van-row v-for="(item,index) in listData.list" :key="`mobileRaw${index}`" class="row" type="flex" justify="center" align="center">
          <van-col span="7">
            <van-row style="color:green;">{{item.order_no}}</van-row>
            <van-row>{{item.created_at|getDate}}</van-row>
            <van-row>{{item.created_at|getTime}}</van-row>
          </van-col>
          <van-col span="5">
            <van-row>{{item.game.name}}</van-row>
            <van-row style="color:green;">第 {{item.period}} 期</van-row>
            <van-row style="color:blue;">盘口 ({{item.handicaps}})</van-row>
          </van-col>
          <van-col span="4" style="color:blue;">
            <van-row>{{item.option.option_title_name}}</van-row>
            <van-row>{{item.option.option_name}}</van-row>
            <van-row>
              @
              <span style="color:red">{{item.odds|amountFormat(4)}}</span>
            </van-row>
          </van-col>
          <van-col span="3">{{item.amount}}</van-col>
          <van-col span="5" style="color:blue;">{{item.max_win}}</van-col>
        </van-row>

      </van-row>

      <van-row class="foot">
        <van-row class="paging">
          <van-pagination v-model="currentPage" :total-items="listData.pagination.totalCount" :items-per-page="listData.pagination.defaultPageSize" :show-page-size="4" force-ellipses />
        </van-row>
        <van-row class="amount">
          <van-col span="4">
            <van-row> 注数 </van-row>
            <van-row> {{listData.pagination.totalCount}} </van-row>
          </van-col>
          <van-col span="9">
            <van-row> 下注金额(计) </van-row>
            <van-row> {{listData.page_sum_amount|amountFormat}} </van-row>
          </van-col>
          <van-col span="11">
            <van-row> 结果(总计) </van-row>
            <van-row> {{listData.page_sum_max_win|amountFormat}} </van-row>
          </van-col>
        </van-row>
      </van-row>

    </van-row>
    <van-row v-else class="empty"> 暂时无数据 </van-row>

  </van-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment' // utils
  import { formatFloat } from '@/utils/index'
  import { Row, Col, Button, Pagination } from 'vant'

  export default {
    name: 'OrderList',
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Button.name]: Button,
      [Pagination.name]: Pagination,
    },

    props: {
      getter: {
        type: String,
        default: null,
      },
    },
    data() {
      return {
        loading: false,
        currentPage: 1,
        moduleName: null,
      }
    },

    computed: {
      ...mapGetters(['memberRaw', 'memberBalanced']),
      listData() {
        if (this.getter === 'memberRaw') {
          this.moduleName = 'MemberOrdersRaw'
          return this.memberRaw
        } else if (this.getter === 'memberBalanced') {
          this.moduleName = 'MemberOrdersBalanced'
          return this.memberBalanced
        }
        return null
      },
    },

    // 数据格式化
    filters: {
      getDate(time) {
        return moment.unix(time).format('YYYY-MM-DD')
      },
      getTime(time) {
        return moment.unix(time).format('HH:mm:ss')
      },
      amountFormat(val, point = 2) {
        return formatFloat(val, point)
      },
    },

    async created() {},

    methods: {
      async fetchData() {
        this.loading = true
        if (this.moduleName) {
          await this.$store.dispatch(this.moduleName, {
            page: this.currentPage,
            // 'per-page': this.pageSize,
          })
        }
        this.loading = false
      },
    },

    watch: {
      async currentPage(to, from) {
        await this.fetchData()
      },
      async moduleName(to, from) {
        await this.fetchData()
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import 'src/styles/variables.scss';
  .mobile-raw {
    text-align: center;
    .top {
      background-color: #ffffff;
      font-size: 14px;
      .van-col {
        padding: 10px 0;
        border-left: 1px solid $bgc;
        border-bottom: 1px solid $bgc;
      }
      .van-col:first-of-type {
        border-left: none;
      }
    }

    .list {
      height: calc(100vh - 46px - 50px - 37px - 104px); //计算
      overflow: scroll;
      font-size: 12px;
      margin: 3px 0;
      .row {
        padding: 3px 0;
        background: #fff;
        margin-bottom: 2px;
        .van-col {
          .van-row {
            padding: 2px 0;
          }
        }
      }
    }

    .foot {
      .paging {
        margin-bottom: 4px;
      }
      .amount {
        padding: 4px 0;
        // border: 1px solid rgb(56, 214, 104);
        background-color: #fff;
        font-size: 20px;
        // color: red;
        .van-col {
          .van-row {
            padding: 2px 0;
          }
          .van-row:first-of-type {
            color: gray;
            font-size: 13px;
          }
        }
      }
    }

    .empty {
      padding-top: 20px;
    }
  }
</style>